/**
 * Created by chaoshen on 2017/2/27.
 */
import { Directive, ElementRef, Input, Renderer , HostListener} from '@angular/core';

@Directive({
	selector: '[myHighlight]'
})
export class HighlightDirective{
	//ElementRef 注入到指令构造函数中。 这样代码可以访问 DOM 元素。ElementRef是一个服务，它赋予我们通过它的nativeElement属性直接访问 DOM 元素的能力。
	//Renderer 让代码可以改变 DOM 元素的样式。Renderer服务允许通过代码设置元素的样式。

	//注入 ElementRef 以访问指令当前所在元素，Renderer 设置该元素的样式
	constructor(private el: ElementRef,private renderer: Renderer){
		// renderer.setElementStyle(el.nativeElement,'backgroundColor','yellow');
	}
	//添加在指令上添加一个可注入属性 highlightColor(输入属性：名字可以任取)，从外层接收颜色的输入
	//@Input向类添加元数据，使highlightColor属性能以myHighlight为别名进行绑定。 没有这个输入元数据，Angular 会拒绝绑定
	@Input('myHighlight') highlightColor: string;
	//默认颜色
	@Input() defaultColor: string;
	@HostListener('mouseenter') onMouseEnter(){
		this.highlight(this.highlightColor || this.defaultColor,'white');
	}
	@HostListener('mouseleave') onMouseLeave(){
		this.highlight(null,'black');
	}
	private highlight(bgcolor: string,color){
		this.renderer.setElementStyle(this.el.nativeElement,'backgroundColor',bgcolor);
		this.renderer.setElementStyle(this.el.nativeElement,'color',color);
	}
}
/*           创建属性型指令步骤           */
//1. 通过'@angular/core'模块导入 Directice，ElementRef，Input，Renderer等相关类
	//Directive 为指令装饰器，存储一些指令的元数据
	//ElementRef 为服务 用作访问当前属性型指令所引入的 DOM 元素，主要属性el.nativeElement
	//Renderer 为服务 用作修饰 DOM 元素的 CSS 样式
	//Input 装饰器 将指令的属性绑定变为公有，可以被父组件绑定值
//2. 完善Directive 装饰器的元数据 比如装饰器的名字 selector: '[myHighlight]'

//3. 导出指令类，引入到 appModule 模块中，被其他组件使用

//4. constructor中完成相关服务的注入 (private el: ElementRef,private renderer: Renderer)

//5. 公开数据绑定 @Input()

//6. 通过服务访问引入指令的元素，以及进行相关逻辑上的渲染


